<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sportData</title>
</head>

<body class="df dcloum">
    <main>
        <div class="content">
            <!-- 返回按钮 -->
            <span id="back" class="iconfont icon-xiangzuo"></span>
            <!-- 运动数据和头像 -->
            <div class="title df">
                <span class="font20">我的运动数据</span>
                <div class="headPic"> <img alt=""  id="vatar"></div>
            </div>
            <!-- 总运动和 本周消耗-->
            <div class="sportsunder df">
                <div>
                    <div class="font16 tite">总运动</div>
                    <p><span class="num" id="allTime">99999</span>分钟</p>
                </div>
                <span class="line"></span>
                <div>
                    <div class="font16  tite">本周消耗</div>
                    <p><span class="num" id="allCalorie">99999</span>千卡</p>
                </div>
            </div>
            <!-- 消耗/累计/打卡 -->
            <div class="data df">
                <div>
                    <span>消耗(千卡)</span>
                    <p>999999</p>
                </div>
                <div>
                    <span>累计(天)</span>
                    <p>999</p>
                </div>
                <div>
                    <span>连续(天)</span>
                    <p>999</p>
                </div>

            </div>
        </div>
        </div>
        <!-- 柱状图 -->
        <div class="echars1 ">
            <div id="cloumPic"></div>
        </div>
        <!-- 饼图 -->
        <div class="echars2">
            <div id="piePic"></div>
        </div>
        <!-- 折线图 -->
        <div class="echars3">
            <div id="LineChart"></div>
        </div>
        <!-- 堆叠图 -->
        <div class="echars4">
            <div id="moreChart"></div>
        </div>
    </main>
</body>

</html>